<template>
  <div>
    <div class="box">
      <p>{{sex?'男':"女"}}</p>
      <img :src="url" />
    </div>
    <button @click="revSex">按钮</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sex: 0,
      url: "https://img0.baidu.com/it/u=3081902715,3514359131&fm=26&fmt=auto"
    };
  },

  created() {},

  methods: {
    revSex() {
      this.sex = !this.sex;
      if (this.sex)
        return (this.url =
          "https://bkimg.cdn.bcebos.com/pic/d6ca7bcb0a46f21f72c6134ff6246b600c33ae38?x-bce-process=image/resize,m_lfit,w_440,limit_1/format,f_auto");
      this.url =
        "https://img0.baidu.com/it/u=3081902715,3514359131&fm=26&fmt=auto";
    }
  }
};
</script>

<style scoped lang='less'>
.box {
  height: 300px;
  width: 300px;
  color: red;
  img {
    height: 200px;
    width: 200px;
  }
}
</style>
